<template>
    <view style="display:flex;justify-content:space-around;padding:12rpx;">
            <text class="recom" :class="[isShow==0?'active':'']" @click="choose(0)">热歌榜</text>
            <text class="recom" :class="[isShow==1?'active':'']" @click="choose(1)">飙升榜</text>
            <text class="recom" :class="[isShow==2?'active':'']" @click="choose(2)">原创榜</text>
        </view>
    <view v-if="isShow==0">
        <view class="items" v-for="item,index in BSArr" :key="index">
            <view style="font-size: 28rpx;margin-right: 30rpx;">{{ index+1 }}</view>    
            <view class="gurudin-audio" :class="theme">
                        <view class="gurudin-poster">
                          <image :src="item.musicImg" v-if="item.musicImg != ''" class="musicRotate" :class="{'musicPaused':!audio[index].isPlay}"></image>
                          <view class="tools" @click="play(index)">
                            <image :src="audio[index].isPlay ? icon.pause : icon.play"></image>
                          </view>
                        </view>
                        <view class="gurudin-content">
                          <view class="title">
                            {{item.musicName}}
                            <view class="time"></view>
                          </view>
                          <view class="author">{{item.musicAuthor}}</view>
                        </view>
	                </view>
            <view class="btn" @click="gotoIP(item.musicId)">使用</view>
        </view>
    </view>
    <view v-if="isShow==1">
        <view class="items" v-for="item,index in RGArr" :key="index">
            <view style="font-size: 28rpx;margin-right: 30rpx;">{{ index+1 }}</view>    
            <view class="gurudin-audio" :class="theme">
                        <view class="gurudin-poster">
                          <image :src="item.musicImg" v-if="item.musicImg != ''" class="musicRotate" :class="{'musicPaused':!audio[index].isPlay}"></image>
                          <view class="tools" @click="play(index)">
                            <image :src="audio[index].isPlay ? icon.pause : icon.play"></image>
                          </view>
                        </view>
                        <view class="gurudin-content">
                          <view class="title">
                            {{item.musicName}}
                            <view class="time"></view>
                          </view>
                          <view class="author">{{item.musicAuthor}}</view>
                        </view>
	                </view>
            <view class="btn" @click="gotoIP(item.musicId)">使用</view>
        </view>
    </view>
    <view v-if="isShow==2">
        <view class="items" v-for="item,index in YCArr" :key="index">
            <view style="font-size: 28rpx;margin-right: 30rpx;">{{ index+1 }}</view>    
            <view class="gurudin-audio" :class="theme">
                        <view class="gurudin-poster">
                          <image :src="item.musicImg" v-if="item.musicImg != ''" class="musicRotate" :class="{'musicPaused':!audio[index].isPlay}"></image>
                          <view class="tools" @click="play(index)">
                            <image :src="audio[index].isPlay ? icon.pause : icon.play"></image>
                          </view>
                        </view>
                        <view class="gurudin-content">
                          <view class="title">
                            {{item.musicName}}
                            <view class="time"></view>
                          </view>
                          <view class="author">{{item.musicAuthor}}</view>
                        </view>
	                </view>
            <view class="btn" @click="gotoIP(item.musicId)">使用</view>
        </view>
    </view>
    
    
</template>

<script setup>
import { httpRequest } from '../../utils/http';
import { useVideoStore } from '../../store/modules/video';
import { ref } from 'vue';
import { onLoad,onUnload,onHide} from "@dcloudio/uni-app";
            const store = useVideoStore()
           const isShow = ref(0)
            const BSArr = ref([])
            const RGArr = ref([])
            const YCArr = ref([])
           const musicId = ref(-1)
           const audioContexts =ref([])
           const icon = ref({
              play: '',
              pause: '',
            })
           const audio = ref([])
    onLoad((options)=>{
        getMusic()
    })
    const play = (i) => {
            if (audio.value[i].isPlay) {
          // 暂停播放
          onPause(i);
        } else {
          // 开始播放
          onPlay(i);
        }
    }
     //音频暂停
    const onPause = (i)=>{
            audio.value[i].isPlay = false
            audioContexts.value[i].pause()
        }
        //音频播放
       const onPlay = (i) => {
            audio.value.map(e=>e.isPlay = false)
            audioContexts.value.map(e=>e.stop())
            audioContexts.value[i].onCanplay(e=>{})
            audio.value[i].isPlay = true
            audioContexts.value[i].play()
            audioContexts.value[i].onTimeUpdate(e=>{
                console.log(JSON.stringify(e));
            })
            audioContexts.value[i].onError(err=>{
                console.log(err);
                audio.value[i].isPlay = false
                // uni.showModal({
                //    title: '提示',
                //    content: '系统错误',
                //    showCancel: false
                //  });
            })
            audioContexts.value[i].onEnded(e=>{
                onPause(i)
            })
        }
       const audioContent = (musicArr)=>{
        audioContexts.value = []
            musicArr.forEach((audioItem, index) => {
              const audioContext = uni.createInnerAudioContext();
              audioContext.src = audioItem.musicUrl;
              audioContexts.value.push(audioContext);
            });
        }
        const getAudio = (musicArr) => {
            for(let i = 0;i<musicArr.length;i++){
                audio.value.push({
          /**
           * 是否正在播放
           * false=否 true=是
           */
          isPlay: false,
          
          /**
           * 当前播放时间
           */
          startTime: 0,
          
          /**
           * 音频总时长
           */
          duration: 0,
          
          /**
           * 播放进度
           */
          playProgress: 0,
        })
            }
        }
       const getMusic = async()=>{
            const res = await httpRequest('/api/musicRad','POST',)
            console.log(res);
            if(isShow.value == 0){
                BSArr.value = res.data
                audioContent(BSArr.value)
                getAudio(BSArr.value)
            }
            if(isShow.value == 1){
                RGArr.value = res.data
                audioContent(RGArr.value)
                getAudio(RGArr.value)
            }
            if(isShow.value == 2){
                YCArr.value = res.data
                audioContent(YCArr.value)
                getAudio(YCArr.value)
            } 
        }
       const choose=(n)=>{
            isShow.value = n
            audio.value.map(e=>e.isPlay=false)
            audioContexts.value.map(e=>e.stop())
            audioContexts.value.map(e=>e.onStop((res)=>{
              console.log('停止');
              
            }))
              getMusic()

        }
       const gotoIP = (id)=>{
            //添加个性音乐
            const res= httpRequest('/api/addDiyMusic','POST',{businessId:uni.getStorageSync('business').businessId,musicId:id})
            uni.showToast({title:'添加至个性音乐成功',icon:'none'})
        }
        onHide(()=>{
          console.log('关闭音乐'); 
        audioContexts.value.map(e=>e.stop())
         })
         onUnload(()=>{
          console.log('关闭音乐');
             audioContexts.value.map(e=>e.stop())
         })
</script>

<style lang="scss" scoped>
.recom{
        font-size: 32rpx;
        height: 110rpx;
        line-height: 110rpx;
    }
    .active{
        color: rgba(142,84,244,1);
        border-bottom: 2px solid rgba(142,84,244,1);
    }
    .items{
        position: relative; 
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 16rpx 0;
        padding: 16rpx;
        .btn{
            position: absolute;
            top: 50rpx;
            right: 30rpx;
            width: 100rpx;
            height: 64rpx;
            color: rgba(142,84,244,1);
            border: 2rpx solid rgba(142,84,244,1);
            text-align: center;
            line-height: 64rpx;
        }
    }
    .gurudin-poster {
    background: #dcdee2;
  }

  .gurudin-content {
    .title {
      color: #2C405A;

      .time {
        color: #808695;
      }
    }

    .author {
      color: #808695;
    }
  }

.dark {
  border: 2rpx solid #17233d;
  background: #515a6e;

  .gurudin-poster {
    background: #17233d;
  }

  .gurudin-content {
    .title {
      color: #FFFFFF;

      .time {
        color: #c5c8ce;
      }
    }

    .author {
      color: #c5c8ce;
    }
  }
}

.gurudin-audio {
  animation:mymove .5s;
  position: relative;
  height: 130rpx;
  border-radius: 8rpx;
  clear: both;
  width: 100%;
    display: flex;

  .gurudin-poster, .gurudin-content {
    float: left;
  }

  .gurudin-poster {
    position: relative;
    width: 130rpx;
    height: 126rpx;
    margin-top: 1rpx;
    margin-left: 1rpx;
    border-top-left-radius: 8rpx;
    border-bottom-left-radius: 8rpx;

    image {
      width: 110rpx;
      height: 110rpx;
      margin: 10rpx;
      opacity: 0.8;
      border-radius: 100%;
    }

    .tools {
      position: absolute;
      text-align: center;
      top: 0;
      left: 0;
      height: 130rpx;
      width: 130rpx;

      image {
        width: 50rpx;
        height: 50rpx;
        margin-top: calc((100% - 50rpx) / 2);
      }
    }
  }

  .gurudin-content {
    width: calc(100% - 130rpx - 62rpx);
    height: calc(130rpx - 60rpx);
    padding: 30rpx;
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */

    .title {
        position: relative;
        font-size: 28rpx;
        height: 40rpx;
        width: 314rpx;
        overflow: hidden;
        text-overflow: ellipsis;

      .time {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 24rpx;
      }
    }

    .author {
      margin-top: 10rpx;
      font-size: 24rpx;
    }
  }
}

@keyframes mymove
{
	from {
    opacity: 0;
  }

	to {
    opacity: 1;
  }
}

// 旋转动画
.musicRotate{
  animation: rotate 10s linear infinite;
}
  
@keyframes rotate{
  from{
    transform: rotate(0deg)
  }
  to{
    transform: rotate(359deg)
  }
}
  
.musicPaused{
  animation-play-state: paused;
}
</style>